﻿<%@ Page Title="Title" Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" MasterPageFile="~/Views/Shared/Site.Master" %>
<%@ Register TagPrefix="o" Namespace="Omu.AwesomeWebForms" Assembly="Omu.AwesomeWebForms, Version=1.0.0.0, Culture=neutral, PublicKeyToken=e8b65a0968999f7e" %>
<asp:Content runat="server" ID="Title" ContentPlaceHolderID="TitleContent"></asp:Content>
<asp:Content runat="server" ID="Main" ContentPlaceHolderID="MainContent">
<h3>MultiLookup</h3>

<o:MultiLookup runat="server" ID="Fruits" GetMultipleUrl="~/svc/aja.svc/FruitGetMultiple"
 SearchUrl='~/svc/aja.svc/FruitSearch' SelectedUrl="~/svc/aja.svc/FruitSelected" Value='["1","2","3"]' ClearButton="true" />

 <p class="te">
 The MultiLookup is similar to the Lookup except it requires 3 urls, one additional url is for showing the selected items in the popup, 
 and the url used for showing the value in the readonly field receives a json array of the selected items and must return a collection of string.
 Also the SearchUrl will receive a selected parameter - array of the selected items.
 </p>
  <p class="te">
        The MultiLookup requires 3 urls to service methods:
    </p>
    <ul class="lst te">
        <li><b>GeMultipletUrl</b> - used to show the value in the readonly field, it will receive a <b>v</b>
            parameter which is going to be a JSON Array of the selected items</li>
        <li><b>SearchUrl</b> - used for searching, this method will receive a search parameter (the
            value that the user has entered in the search textbox), and must return a <b>LookupResult</b> object. This method will also receive a <b>selected</b> parameter (array of the selected items), use this to exclude the selected items from the search result.
            <br />            
            <br />            
            The <b>LookupResult</b> has 2 properties:
            <ul class="lst">
                <li>Items - a collection of KeyContent objects and it is the search result that the user will see</li>
                <li>More - a bool property used for pagination, if you set it to true the "more" button will appear, and when the "more" button is going to be clicked the SearchUrl will be called but with an additional page parameter 
                , on the first click on "more" button the page will be = to 2, on the second click it will be = 3, and so on, but when the search button is clicked the page will reset to 1 (the page parameter is always sent with value = 1, but if you don't use pagination you can just ignore it )</li>
            </ul>
        </li>
        <li><b>SelectedUrl</b> - used to show the selected items in the popup, it receives an array of the selected items and must return a collection of KeyContent</li>
    </ul>

    <p class="te">
    so here's an example:
    </p>
    <pre class="prettyprint">
    &lt;o:MultiLookup runat=&quot;server&quot; ID=&quot;Fruits&quot; GetMultipleUrl=&quot;~/svc/aja.svc/FruitGetMultiple&quot;
 SearchUrl='~/svc/aja.svc/FruitSearch' SelectedUrl=&quot;~/svc/aja.svc/FruitSelected&quot; ClearButton="true" /&gt;
    </pre>
    
    <pre class="prettyprint">
[WebGet]
[OperationContract]
public string[] FruitGetMultiple(string v)
{
    var ids = v.GetIntArray();
    return Fruits.Where(o =&gt; ids.Contains(o.Id)).Select(f =&gt; f.Name).ToArray();
}

[WebGet]
[OperationContract]
public LookupResult FruitSearch(string search, string selected, int page)
{
    var sel = selected.GetIntArray();

    var items = Fruits.Where(o =&gt; o.Name.Contains(search) &amp;&amp; !sel.Contains(o.Id))
        .Select(f =&gt; new KeyContent { Key = f.Id, Content = f.Name });

    const int pageSize = 5;
    return new LookupResult
    {
        Items = items.Skip((page - 1) * pageSize).Take(pageSize),
        More = items.Count() &gt; page * pageSize
    };
}

[WebGet]
[OperationContract]
public IEnumerable&lt;KeyContent&gt; FruitSelected(string selected)
{
    var sel = selected.GetIntArray();
    return Fruits.Where(o =&gt; sel.Contains(o.Id))
        .Select(f =&gt; new KeyContent { Key = f.Id.ToString(), Content = f.Name });
}
    
</pre>
<p class="te">The <b>GetIntArray</b> method is an extension shown  <a href="<%=Url.Action("AjaxDropdown") %>#deserialize">here</a>
</p>
<h3>Binding to parents, parameters</h3>
<p class="te"> The MultiLookup can be bound to one or multiple parents, and parameters with values can be sent, all exactly like the <a href="<%=Url.Action("AjaxDropdown") %>">AjaxDropdown</a>
<br/>Additional parameters (parents, predefined values) will be sent to all 3 urls.
 </p>

 <h3 id="getsetvalue">Setting or getting the Value</h3>
 <p class="te">
 there are 2 properties for this:
 </p>
 <ul class="lst te">
 <li>Value (string) - selected items as a stringified JSON Array </li>
 <li>Items (IEnumerable&lt;object&gt;) - selected items as a collection of object</li>
 </ul>
 <p class="te">
 example:
 </p>
  <pre class="prettyprint">
int[] vals = new int[] {1, 2, 3, 4, 5};
            
//to set the value
Fruits.Items = vals.Cast&lt;Object&gt;();
//or
Fruits.Value = vals.ToJson(); //extension from Omu.AwesomeWebForms.Core

//to get the value
int[] arr = Fruits.Items.Cast&lt;int&gt;().ToArray();
//or
int[] arr2 = Fruits.Value.GetIntArray(); // extension from Omu.AwesomeWebForms.Core
  </pre>

 <h3>Misc properties</h3>
 <table class="ap te">
 <tr><td>ClearButton</td><td> if true will add a "x" button used to clear the value of Lookup</td></tr>
 <tr><td>Width</td><td> the width in px of the lookup window</td></tr>
 <tr><td>Height</td><td> the height in px of the lookup window</td></tr> 
 <tr><td>FullScreen</td><td> if true Width and Height are ignored and the lookup window will take all the available width and height</td></tr>
 </table>

        <script type="text/javascript">
            $(function () {
                prettyPrint();
            });
    </script>
</asp:Content>
